<template>
  <div style="background-color: #eee; height:91vh">
    <div @click="toBigScreen">
      <i
        class="el-icon-full-screen"
        style="position: absolute; right:15px; top:15px; font-size:30px;color:#fff"
      ></i>
    </div>
    <img class="img" src="../../../assets/logo/hainalogo.png" alt />
    <div class="container">
      <!-- <div class="headerContent">
        <el-date-picker style="width:40%" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
        <el-select style="width:40%" v-model="value" filterable placeholder="请选择楼栋">
            <el-option
              v-for="item in buildingNoOptions" 
              :key="item.id"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
          <el-select style="width:40%" v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in storeyOptions"
              :key="item.id"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
      </div>-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-date-picker
            style="width:88%"
            @change="selectDate"
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-select
            style="width: 88%;"
            @change="selectBuild"
            v-model="buildName"
            filterable
            placeholder="请选择楼栋"
          >
            <el-option
              v-for="item in buildingNoOptions"
              :key="item.id"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-select
            style="width:88%"
            v-model="storeyName"
            filterable
            @change="selectSteory"
            placeholder="请选择楼层"
          >
            <el-option
              v-for="item in storeyOptions"
              :key="item.id"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <div style="display: flex;">
        <!-- 左侧 -->
        <div style="width: 60%;">
          <div class="leftHead">
            <div>
              <span style="font-size: 60px; font-weight:700">{{buildTitle}}</span>
              <span style="margin-left: 20px;">{{storeyTitle}}</span>
            </div>
            <div style="display: flex;">
              <div
                class="item"
                v-for="(item,index) in topList"
                :key="index"
                :class=" index==0 ?'first' : (index ==1) ? 'second' :'third' "
              >
                <div class="hanzi">{{ item.value }}</div>
                <div style="color: #000;">{{ item.label }}</div>
              </div>
            </div>
          </div>
          <div class="leftContent">
            <div
              class="box"
              v-for="(item,value) in leftList"
              :key="Number(value)"
              :class="item == 1?'firstBox' : (item == 2 ? 'secondBox' : 'thirdBox')"
            >{{ value }}</div>

            <div v-if="Object.keys(leftList).length == 0" style="text-align: center;">
              <div class="kong">{{ buildTitle }} {{ storeyTitle }} 没有数据</div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="rightContent">
          <div style="font-weight: 700;">未签到宿舍人员</div>
          <div v-if="rightList.list.length <= 0" class="kongSS">该楼层没有未签到宿舍人员</div>
          <div style="display: flex;   flex-wrap: wrap;">
            <div
              class="card"
              v-for="(item,index) in rightList.list"
              :class="index % 2 != 0 ?'oddLeave' : ''"
              :key="index"
            >
              <div>
                <img style="width: 80px; height:80px;margin-top:10px" :src="item.stuPhoto" alt />
              </div>
              <div style="margin-left: 10px;">
                <div style="padding: 3px;">姓名：{{ item.studentName }}</div>
                <div style="padding: 3px;">宿舍：{{ item.dormitoryName }}</div>
                <div style="padding: 3px;">班级：{{ item.className }}</div>
                <div style="padding: 3px;">班主任：{{ item.teacherName }}</div>
                <div style="padding: 3px;">电话：{{ item.teacherPhone }}</div>
              </div>
            </div>
          </div>
          <div style="padding: 0 50px;">
            <!-- <pagination
              v-if="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getPagation"
              style="background-color: #eee;"
              :small="true"
            />-->
            <el-pagination
              page-size="6"
              page-sizes="[6]"
              v-if="total > 0"
              :total="total"
              style="float:right"
              @current-change="currentChange"
              @prev-click="prevClick"
              @next-click="nextClick"
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSdAttenceVisualizationData,
  getSdAttenceAbsenceStuPageList
} from "@/api/report/dormitoryVisual";

import moment from "moment";
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 6
      },
      buildingNoOptions: [],
      storeyOptions: [],
      topList: [],
      leftList: {},
      rightList: [],
      buildName: "",
      storeyName: "",
      dateValue: "",
      buildTitle: "",
      storeyTitle: "",
      total: 0
    };
  },
  mounted() {
    this.dateValue = moment(Number(Date.now()) - 86400000).format("yyyy-MM-DD");
    this.buildTitle = "听湖苑";
    this.storeyTitle = "四楼";
    this.buildName = "5";
    this.storeyName = "4";
    console.log(this.dateValue);
    this.getBuildSteoryList();
    this.getPageList();
  },
  methods: {
    // 获取楼栋和楼层信息
    getBuildSteoryList() {
      this.getDicts("sys_building").then(response => {
        this.buildingNoOptions = response.data;
      });
      this.getDicts("sys_storey").then(response => {
        this.storeyOptions = response.data;
      });
    },
    // 初始化可视化列表数据
    getPageList() {
      getSdAttenceVisualizationData({
        buildingNo: "5",
        storey: "4",
        accessDate: "2023-09-20",
        pageSize: 6,
        pageNum: 1
      }).then(res => {
        console.log(res);
        this.topList = res.data.top;
        this.leftList = res.data.left;
        this.rightList = res.data.right;
        this.total = res.data.right.total;
      });
    },

    // 渲染楼栋
    selectBuild(e) {
      console.log(e);
      console.log(this.buildingNoOptions);
      this.buildingNoOptions.forEach(item => {
        if (e == item.dictValue) {
          this.buildTitle = item.dictLabel;
        }
      });
      console.log(this.buildTitle);
    },
    // 渲染楼层
    selectSteory(e) {
      console.log(e);
      console.log(this.storeyOptions);
      this.storeyOptions.forEach(item => {
        if (e == item.dictValue) {
          this.storeyTitle = item.dictLabel;
        }
      });
      getSdAttenceVisualizationData({
        buildingNo: this.buildName,
        storey: this.storeyName,
        accessDate: this.dateValue,
        pageSize: 6,
        pageNum: 1
      }).then(res => {
        console.log(res);
        this.total = res.data.right.total;
        this.topList = res.data.top;
        this.leftList = res.data.left;
        this.rightList = res.data.right;
      });
    },
    selectDate(e) {
      console.log(e);
    },
    // 分页器的方法
    getPagation() {
      getSdAttenceAbsenceStuPageList({
        buildingNo: this.buildName,
        storey: this.storeyName,
        accessDate: this.dateValue,
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum
      }).then(res => {
        console.log(res);
        this.rightList = res.data;
        this.total = res.data.total;
        console.log(this.rightList);
      });
    },
    toBigScreen() {
      this.$router.push("/visualBigScreen");
    },

    pagationList(e) {
      getSdAttenceAbsenceStuPageList({
        buildingNo: this.buildName,
        storey: this.storeyName,
        accessDate: this.dateValue,
        pageSize: this.queryParams.pageSize,
        pageNum: e
      }).then(res => {
        console.log(res);
        this.rightList = res.data;
        this.total = res.data.total;
        console.log(this.rightList);
      });
    },
    currentChange(e) {
      this.pagationList(e);
    },
    prevClick(e) {
      this.pagationList(e);
    },
    nextClick(e) {
      this.pagationList(e);
    }
  }
};
</script>

<style scoped>
.header {
}
.leftHead {
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.container {
  padding: 0 0 40px 40px;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  padding: 0 20px;
}
.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  margin-top: 20px;
  width: 45%;
  background: #fff;
  font-size: 14px;
  color: #979999;
}
.leftContent {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  margin-left: -20px;
}
.box {
  width: 150px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  margin-top: 30px;
  font-weight: 700;
  color: #fff;
  margin-left: 20px;
}
.img {
  width: 100%;
}

.rightContent {
  width: 40%;
  padding: 40px 0;
  margin-left: 50px;
  justify-content: space-between;
  align-content: center;
}
.oddLeave {
  margin-left: 20px;
}
.headerContent {
  display: flex;
  justify-content: space-between;
}
.hanzi {
  text-align: center;
  font-size: 50px;
  font-weight: 700;
}
.first {
  color: #ed009c;
}
.second {
  color: #1001e6;
}
.third {
  color: #595050;
}
.firstBox {
  background: #ed009c;
}
.secondBox {
  background: #1001e6;
}
.thirdBox {
  background: #595050;
}
html {
  background: #eee;
}
.kong {
  width: 1000px;
  height: 400px;
  font-size: 50px;
  text-align: center;
  line-height: 400px;
  color: #ccc;
}
/deep/.el-pager li {
  background: #eee;
}
/deep/.el-pagination {
  background: #eee;
}
/deep/.el-pagination--small {
  background: #eee;
}
/deep/.el-pagination button:disabled {
  background: #eee;
}
/deep/.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: #eee;
}
/deep/.el-pagination .btn-next {
  background: #eee;
}
.kongSS {
  font-size: 40px;
  color: #ccc;
  height: 300px;
  line-height: 300px;
  text-align: center;
}
</style>